<template>
	<view class="content">
		<!-- 顶部搜索 -->
		<view class="search">
			<view class="search-item">
				<image src="../../static/image/search/6.png" mode="widthFix"></image>
			</view>
			<view class="search-item">
				<icon class="iconfont" type="#007AFF"></icon>
				<text>中国</text>
			</view>
			<view class="search-item">
				<image src="../../static/image/mine/r.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 轮播滚动 -->
		<view class="banner">
			<swiper :indicator-dots="true" :circular="true" :autoplay="false" :interval="3000" :duration="1000">
				<swiper-item v-for="(v, k) in bannerListData" :key="k">
					<view class="swiper-item">
						<image :src="v.imageUrl" mode="widthFix"></image>
						<text>{{v.typeTitle}}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 快捷方式 -->
		<view class="quick-box">
			<view class="quick-item">
				<image src="../../static/image/index/t_1.png" mode="widthFix"></image>
				<view class="text" type="">每日推荐</view>
			</view>
			<view class="quick-item">
				<image src="../../static/image/index/t_2.png" mode="widthFix"></image>
				<view class="text" type="">歌单</view>
			</view>
			<view class="quick-item">
				<image src="../../static/image/index/t_3.png" mode="widthFix"></image>
				<view class="text" type="">排行榜</view>
			</view>
			<view class="quick-item">
				<image src="../../static/image/index/t_4.png" mode="widthFix"></image>
				<view class="text" type="">电台</view>
			</view>
			<view class="quick-item">
				<image src="../../static/image/index/t_5.png" mode="widthFix"></image>
				<view class="text" type="">直播</view>
			</view>
		</view>
		<!-- 推荐歌单 -->
		<view class="recomment">
			<view class="recomment-bar">
				<view class="bar-box">推荐歌单</view>
				<view class="bar-box">
					<text>歌单广场</text>
				</view>
			</view>
			<view class="recomment-block">
				<view class="block-item" v-for="(v, k) in recommentList" :key="k">
					<view class="block-img" >
						<image :src="v.picUrl" mode="widthFix"></image>
						<text type="">{{ v.playCount | playCountFliter }} 万</text>
					</view>
					<view class="text">{{ v.name }}</view>
				</view>
			</view>
		</view>
		<!-- 新碟 新歌 -->
		<!-- 精选视频 -->
	</view>
</template>

<script>
	import request from '@/utlits/request.js'
	import {getStorageSync} from '@/utlits/myStorageSycn'
	import store from 'store'
	import {mapActions, mapGetters} from 'vuex'
	import {fnGetRecommentList} from '@/apis/index'
	
	
	export default {
		data() {
			return {
				bannerListData: [],
				recommentList:[], // 推荐歌单
			}
		},
		onLoad() {

		},
		computed:{
			// ...mapGetters['bannerData']
		},
		mounted() {
			this.fnGetBannerList();
			this.fnGetRecommentList();
		},
		filters:{
			playCountFliter(num) {
				return Math.floor(num / 10000)
			}
		},
		methods: {
			...mapActions(['GETBANNER']),
		 	async fnGetBannerList() {
				let bannerList = getStorageSync('bannerList')
				// let bannerList = this.bannerData
				if(!bannerList) {
					await this.GETBANNER()
					this.bannerListData = store.state.bannerData.bannerData
				}else{
					this.bannerListData = JSON.parse(bannerList)
				}
			},
			fnGetRecommentList() { //推荐歌单
				fnGetRecommentList().then(res=>{
					let {code, result} = res
					if(code === 200) {
						this.recommentList = result
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			search() {

			},

		}
	}
</script>

<style lang="less">
	.content {
		display: flex;
		padding: 0 16px;
		font-size: 12px;
		flex-direction: column;

		// <!-- 顶部搜索 -->
		.search {
			padding: 10px 0;
			display: flex;
			border-bottom: 1px solid rgba(000, 000, 000, 0.2);
			// box-shadow: 0px 2px 1px rgba(000, 000, 000, 0.2);
			justify-content: space-between;
			align-items: center;
			letter-spacing: center;
			.search-item {
				image {
					padding-top: 5px;
					width: 22px;
				}
			}
			.search-item:nth-child(2) {
				flex: 1;
				height: 36px;
				line-height: 36px;
				text-align: center;
				margin: 0 6px;
				border-radius: 36px;
				color: #c6c6c6;
				background: #f7f7f7;
				align-items: center;
				justify-content: center;

			}
		}

		// <!-- 轮播滚动 -->
		.banner {
			padding: 10px 0;

			.swiper-item {
				display: flex;
				position: relative;
				align-items: center;
				flex-direction: column;

				image {
					width: 100%;
					border-radius: 6px;
				}
				text {
					position: absolute;
					bottom: 0;
					right: 0;
					color: #FFFFFF;
					border-radius: 6px 0 6px 0;
					background-color: #43a5f0;
					padding: 2px 6px;
				}

			}
		}

		// <!-- 快捷方式 -->
		.quick-box{
			width: 100%;
			display: flex;
			justify-content: space-around;
			text-align: center;
			border-bottom: 1px solid #E6E6E6;
			padding-bottom: 10px;
			.quick-item {
				flex: 0 1 24%;
				padding: 4px;
				image{
					width: 50%;
				}
				.text{
					color: #747474;
					padding: 2px 0;
				}
			}
		}

		// <!-- 推荐歌单 -->
		.recomment{
			.recomment-bar{
				display: flex;
				width: 100%;
				.bar-box{
					flex: 1;
				}
				.bar-box:nth-child(1){
					font-weight: 600;
					line-height: 55px;
					font-size: 17px;
				}
				.bar-box:nth-child(2){
					text-align: right;
					line-height: 55px;
					text{
						border: 1px solid #ECECEC;
						padding: 2px 12px;
						border-radius: 15px;
						color: #000;
					}
				}
			}
			
			.recomment-block {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				.block-item {
					flex: 0 1 31%;
					.block-img{					
						position: relative;
						image{
							width: 100%;
							border-radius: 8px;
						}
						text {
							position: absolute;
							right: 0;
							background-color: rgba(86, 86, 86, 0.6);
							color: #fff;
							padding: 2px 8px;
							border-radius: 8px;
						}
					}
					.text{
						width: 100px;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space:nowrap;
						padding: 6px 0 26px 0;
					}
				}
			}
		}
		// <!-- 新碟 新歌 -->
		// <!-- 精选视频 -->


	}
</style>
